<template>

  <div id="home" class="home">
    <nav-bar class="home-navbar">
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-control class="tab-control" ref="tabControl1" :titles="['流行', '精选', '新款']" @tabclick="tabclick"
      v-show="isFlexed" />
    <!-- :pull-up-load="true" @pullingUp="loadMore" -->
    <div class="scroll-box">


      <scroll ref="scroller" class="home-scroll" :probe-type='3' @scroll="contentScroll" :pull-up-load="true"
        @pullingUp="loadMore">
        <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
        <home-recommend-view :recommends="recommends" />
        <home-feature-views />
        <tab-control class="tab-control" ref="tabControl2" :titles="['流行', '精选', '新款']" @tabclick="tabclick" />
        <good-list :goods=' showGoods' />
      </scroll>
    </div>
    <back-top @click.native="backClick" v-show="isShoeBackTop" />
  </div>

</template>

<script>
  //首页子组件的引用
  import homeSwiper from "./chlidComps/homeSwiper.vue";
  import HomeRecommendView from "./chlidComps/HomeRecommendView.vue";
  import HomeFeatureViews from "./chlidComps/HomeFeatureViews.vue";

  //公共样式的引入
  import NavBar from "../../components/common/navbar/navbar.vue";
  import tabControl from "../../components/content/tabControl/tabControl.vue";
  import GoodList from "../../components/content/goods/goodList.vue"
  import Scroll from "../../components/common/scroll/scroll.vue"
  import {
    backTopMixin
  } from '../../common/mixin'

  //数据的引用
  import {
    getHomeMultidata,
    getHomeGoods
  } from "../../network/home";

  export default {
    name: "home",
    mixins: [backTopMixin],
    // 父辈向子辈传参
    props: {},
    // 组件的引用
    components: {
      //首页子组件的注册
      homeSwiper,
      HomeRecommendView,
      HomeFeatureViews,
      //公共样式的引入
      NavBar,
      tabControl,
      GoodList,
      Scroll,

    },
    data() {
      return {
        banners: [],
        recommends: [],
        goods: {
          pop: {
            page: 0,
            list: [],
          },
          new: {
            page: 0,
            list: [],
          },
          sell: {
            page: 0,
            list: [],
          },
        },
        currentType: 'pop',

        tabOffsetTop: 0,
        isFlexed: false,
        saveY: 0
      };
    },
    // 页面进入时加载内容
    mounted() {
      //监听item中图片加载完成另一种解决下拉不了的问题
      this.$bus.$on('itemImageLoad', () => {
        console.log('-----');
        this.$refs.scroller.scroll.refresh()
      })
      const refresh = this.debounce(this.$refs.scroller.refresh, 500)
      this.$bus.$on('itemImageLoad', () => {
        refresh()
      })

    },
    methods: {
      //点击商品列表栏，判断该传那个数据地址
      tabclick(index) {
        switch (index) {
          case 0:
            this.currentType = 'pop';
            break;
          case 1:
            this.currentType = 'new';
            break;
          case 2:
            this.currentType = 'sell';
            break
        }
        this.$refs.tabControl1.currentIndex = index
        this.$refs.tabControl2.currentIndex = index
      },

      //获取高度
      swiperImageLoad() {
        this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop


      },
      contentScroll(position) {
        //返回顶部按钮，当下拉超过1000时就显示按钮，不超过则不显示
        this.isShowBackTop(position)
        //是否吸顶效果
        this.isFlexed = (-position.y) > this.tabOffsetTop


      },



      //上拉加载更多数据
      loadMore() {
        this.getHomeGoods(this.currentType)
      },
      //轮播图数据请求
      getHomeMultidata() {
        getHomeMultidata().then(res => {
          this.banners = res.data.data.banner.list;
          this.recommends = res.data.data.recommend.list;
        })
      },
      //商品列表数据请求
      getHomeGoods(type) {
        const page = this.goods[type].page + 1
        getHomeGoods(type, page).then(res => {
          console.log(res);
          this.goods[type].list.push(...res.data.data.list);
          this.goods[type].page += 1
          //完成上拉加载更多
          this.$refs.scroller.finishPullUp()
        })
      }
    },

    // 计算属性
    computed: {
      //获取列表数据的list
      showGoods() {
        return this.goods[this.currentType].list
      }
    },

    //在进入时
    //把通过better-scroll里面的scrollTop来回到之前保存的位置处
    activated() {
      this.$refs.scroller.scrollTo(0, this.saveY, 0)
      this.$refs.scroller.refresh()
    },
    /* 离开时
    通过better-scroll里面的scroll.y来记录位置，
    定义一个变量(savaY)来保存位置 */
    deactivated() {
      //保存Y值
      this.saveY = this.$refs.scroller.getScrollSaveY()

      //2.离开该页面时取消全局事件监听
      this.$bus.$off('itemImgLoad', this.itemImgListener)

    },
    // 组件被创建之后执行代码
    created() {
      //请求多个数据
      this.getHomeMultidata();
      //请求商品数据
      this.getHomeGoods('pop');
      this.getHomeGoods('new');
      this.getHomeGoods('sell');

    },

    // 监测变化
    watch: {},
  };

</script>
<style scoped>
  .home {
    height: 100vh;
    position: relative;
  }

  .home-navbar {

    background-color: var(--color-text);
    color: white;

  }

  .tab-control {
    position: relative;
    z-index: 10;

  }

  .scroll-box {
    height: calc(100% - 44px - 49px);
    overflow: hidden;

  }

  .home-scroll {
    height: 100%;
    background: white;
  }

</style>
